<template>
	 <page-meta :root-font-size="`${fontSize}px`"></page-meta>
	<view class="cleanDetail-container">
		<view class="navbar">
			<view v-for="(item, index) in navList" :key="index" class="nav-item"
				:class="{ current: tabCurrentIndex === index }" @click="tabClick(index)">
				{{ item.text }}
			</view>
		</view>
		<view v-if="tabCurrentIndex == 0">
			<view class="detail-item">
				<text class="left">记录编号：</text>
				<view class="right-content">{{ticketDetail['工单编号']}}</view>
				<!-- <text>TSxxxxxxxxxxxxxxx</text> -->
			</view>
			<view class="detail-item">
				<text class="left">所属小区：</text>
				<view class="right-content">{{ticketDetail['所属项目名称']}}</view>
				<!-- <text>TSxxxxxxxxxxxxxxx</text> -->
			</view>
			<view class="detail-item">
				<text class="left">业主姓名：</text>
				<view class="right-content">{{ticketDetail['联系人姓名']}}</view>
				<!-- <text>张多多</text> -->
			</view>
			<view class="detail-item">
				<text class="left">联系电话：</text>
				<view class="right-content">{{ticketDetail['联系人电话']}}</view>
				<!-- <text>15846214579</text> -->
			</view>
			<view class="detail-item">
				<text class="left">报事地址：</text>
				<view class="right-content">{{ticketDetail['报事位置']}}</view>
				<!-- <text>西溪花城1幢2单元503</text> -->
			</view>
			<view class="detail-item">
				<text class="left">报事类型：</text>
				<view class="right-content">{{ticketTypes[ticketDetail['工单类型']]}}</view>
			</view>
			<view class="detail-item">
				<text class="left">报事状态：</text>
				<view class="right-content">{{ticketStatus[ticketDetail['工单状态']]}}</view>
			</view>
			<view class="detail-item">
				<text class="left">报事时间：</text>
				<view class="right-content">{{ticketDetail['创建时间']}}</view>
			</view>
			<view v-if="ticketDetail['报事描述']" class="detail-item">
				<text class="left">报事描述：</text>
				<view class="right-content">{{ticketDetail['报事描述']}}</view>
			</view>
			<view class="detail-item" v-if="ticketDetail['上门时间']">
				<text class="left">上门时间：</text>
				<view class="right-content">{{ticketDetail['上门时间']}}</view>
			</view>
			<view v-if="ticketDetail['处理时间']" class="detail-item">
				<text class="left">处理时间：</text>
				<view class="right-content">{{ticketDetail['处理时间']}}</view>
			</view>
			<view v-if="ticketDetail['完成时间']" class="detail-item">
				<text class="left">完成时间：</text>
				<view class="right-content">{{ticketDetail['完成时间']}}</view>
			</view>
			<view class="detail-item" v-if="ticketDetail['接单单位名称']">
				<text class="left">处理单位：</text>
				<view class="right-content">{{ticketDetail['接单单位名称']}}</view>
			</view>
			<view class="detail-item" v-if="ticketDetail['接单人姓名']">
				<text class="left">处理人姓名：</text>
				<view class="right-content">{{ticketDetail['接单人姓名']}}</view>
			</view>
			<view class="detail-item" v-if="ticketDetail['接单人电话']">
				<text class="left">处理人电话：</text>
				<view class="right-content">{{ticketDetail['接单人电话']}}</view>
			</view>
			<view class="detail-item" v-if="renovationTicket">
				<text class="left">装修事项：</text>
				<view class="right-content">{{renovationTicket['装修事项']}}</view>
			</view>
			<view class="detail-item" v-if="renovationTicket">
				<text class="left">装修期限：</text>
				<view class="right-content">{{startTime + ' 至 ' + endTime}}</view>
			</view>
			<view class="detail-item" v-if="renovationTicket">
				<text class="left">施工单位：</text>
				<view class="right-content">{{renovationTicket['施工单位']}}</view>
			</view>
			<view class="detail-item" v-if="renovationTicket">
				<text class="left">施工负责人：</text>
				<view class="right-content">{{renovationTicket['施工负责人']}}</view>
			</view>
			<view class="detail-item" v-if="renovationTicket">
				<text class="left">负责人电话：</text>
				<view class="right-content">{{renovationTicket['负责人电话']}}</view>
			</view>
			<file-list v-if="ticketDetail['报事附件']" title="报事附件" :idList="ticketDetail['报事附件']" :fileObj="ticketFile"
				:length="imgLength"></file-list>
			<view v-if="ticketDetail['处理结果']" class="detail-item">
				<text class="left">处理结果：</text>
				<view class="right-content">{{ticketDetail['处理结果']}}</view>
			</view>
			<file-list v-if="ticketDetail['处理结果附件']" title="处理附件" :length="resultNum" :idList="ticketDetail['处理结果附件']"
				:fileObj="resultFile"></file-list>
			<view class="detail-item" v-if="ticketDetail['业主签字']">
				<text class="left">业主签字：</text>
				<view style="margin-top: 20rpx;">
					<view class="img-item" v-if="signFile">
						<van-image fit="cover" width="110" height="110" :src="signFile" />
					</view>
				</view>
			</view>
			<view class="evaluate-content" v-if="ticketDetail['评价状态'] == 'rated'">
				<view class="evaluate-item">
					<text class="name">评价描述：</text>
					<view class="example-body">
						<uni-rate :readonly="true" :value="ticketDetail['评价分数']" />
					</view>
					<!-- <view class="desc-text">{{rate[ticketDetail['评价分数']]}}</view> -->
				</view>
				<view class="evaluate-desc">{{ticketDetail['评价内容']}}</view>
			</view>
			<file-list v-if="ticketDetail['评价附件']" :length="evaluateNum" title="评价附件" :fileObj="evaluateFile"
				:idList="ticketDetail['评价附件']"></file-list>
			<button  v-if="ticketDetail['工单状态'] == 'completed' && ticketDetail['评价状态'] == 'rating'" @click="goEvaluate"
				class="ticket-btn">评价</button>
			<evaluate-modal @submit="submitEvaluate" @close="isEvaluateVisible = false" v-if="isEvaluateVisible">
			</evaluate-modal>
		</view>
		<view v-if="tabCurrentIndex == 2">
			<view class="example-body" style="background-color: #fff;min-height: 100vh;">
				<assist-step v-if="assistStep.length" :options="assistStep" active-color="#5094FF"
					:active="assistStep.length-1" direction="column" />
				<view class="bgwhite" v-else>
					<van-empty>暂无进程</van-empty>
				</view>
			</view>
		</view>
		<view v-if="tabCurrentIndex == 1" style="padding: 0 40rpx">
			<my-steps :options="ticketDetail['跟进信息']" active-color="#5094FF" :active="ticketDetail['跟进信息'].length-1"
				direction="column" />

		</view>
	</view>
</template>

<script>
	import EvaluateModal from '@/components/evaluateModal.vue'

	import mySteps from '@/myComponents/my-steps/my-steps.vue'
	import dayjs from 'dayjs'	
	import FileList from '@/components/fileList.vue'
	import { mapState } from 'vuex'
	export default {
		computed: {
			...mapState(['fontSize'])
		},
		components: {
			EvaluateModal,
			FileList,
			mySteps
		},
		data() {
			return {
				assistStep: [],
				tabCurrentIndex: 0,
				navList: [{
						text: '工单信息'
					},
					{
						text: '跟进信息'
					},
					// {
					// 	text: '工单进程'
					// }
				],
				rate: {
					1: '非常不满意',
					2: '不满意',
					3: '一般',
					4: '满意',
					5: '非常满意'
				},
				ticketTypes: this.$types.ticketType,
				isEvaluateVisible: false,
				ticketId: null,
				ticketDetail: {},
				ticketStatus: {
					unclaimed: '待处理',
					pending: '待处理',
					handling: '处理中',
					completed: '已完成',
					completedwithtimeout: '超时完成',
					timeout:"已超时"
				},
				renovationTicket: null,
				checkTicket: null,
				startTime: '',
				endTime: '',
				imgLength: 0,
				resultNum: 0,
				evaluateNum: 0,
				imgItem: [],
				ticketFile: {},
				resultFile: {},
				evaluateFile: {},
				signFile: ''
			}
		},
		onLoad(options) {
			this.ticketId = +options.id
			this.getTicketDetail()
			// this.getAssistStep()
		},
		methods: {
			getAssistStep() {
				this.$http2.post('ticketSystem/assist/list', {
					ticketId: this.ticketId
				}).then(res => {
					if (res.code === 10000) {
						console.log(res)
						// this.assistStep = res.data.list
						this.assistStep = res.data.list.map((x, index) => {
							let lastTime;
							if (index == 0) {
								lastTime = new Date(x.assistTime).getTime() - new Date(this.ticketDetail[
									'接单时间']).getTime()
								console.log('lastTime:', lastTime)
							} else if (index > 0 && index < res.data.list.length - 1) {
								lastTime =
									new Date(res.data.list[index].assistTime).getTime() -
									new Date(res.data.list[index - 1].assistTime).getTime();
							} else if (index == res.data.list.length - 1) {
								lastTime = Date.now() - new Date(x.assistTime).getTime();
							}
							return {
								assistType: x.assistType,
								assistTime: x.assistTime,
								reason: x.reason,
								lastTime: this.$funcs.secondToHour(lastTime / 1000),
							};
						});
					}
				})
			},
			tabClick(index) {
				this.tabCurrentIndex = index;			
			},
			goEvaluate() {
				uni.navigateTo({
					url: '../evaluate/evaluate?id=' + this.ticketId
				})
			},
			getTicketDetail() {
				uni.showLoading({
					mask: true
				})
				this.$http2.post('/ticketSystem/ticket/info', {
					id: this.ticketId
				}).then(res => {
					console.log(res)
					if (res.code === 10000) {
						// console.log(res)
						this.renovationTicket = res.data.装修申请工单
						this.checkTicket = res.data.装修验收工单
						if (res.data.处理时间 !== '') {
							res.data.处理时间 = dayjs(res.data.处理时间).format('YYYY-MM-DD HH:mm:ss')
						}
						if (res.data.完成时间 !== '') {
							res.data.完成时间 = dayjs(res.data.完成时间).format('YYYY-MM-DD HH:mm:ss')
						}
						if (res.data.装修申请工单 !== null) {
							this.startTime = dayjs(this.renovationTicket.装修开始时间).format('YYYY-MM-DD')
							this.endTime = dayjs(this.renovationTicket.装修结束时间).format('YYYY-MM-DD')
						}
						if (res.data.报事附件 !== null) {
							res.data.报事附件.forEach((item, index) => {
								this.downloadFile(item, index)
							})
						}
						if (res.data.处理结果附件 !== null) {
							res.data.处理结果附件.forEach((item, index) => {
								this.downloadResult(item, index)
							})
						}
						if (res.data.评价附件 !== null) {
							res.data.评价附件.forEach((item, index) => {
								this.downloadEvaluate(item, index)
							})
						}
						if (res.data.业主签字 !== '') {
							this.downloadSign(res.data.业主签字)
						}
						res.data.创建时间 = dayjs(res.data.创建时间).format('YYYY-MM-DD HH:mm:ss')
						this.ticketDetail = res.data
						
						let that = this
						res.data.跟进信息.forEach(item => {
							item.时间 = dayjs(item.时间).format("YYYY-MM-DD HH:mm:ss")
							item.附件图片 = []
							item.附件.forEach(x => {
								if (x) {
									that.$funcs.downloadImage(x, (res) => {
										item.附件图片.push(res.fileData)
									})
								}
						
							})
						})
					}
				})
			},
			submitEvaluate(val) {
				console.log(val)
			},
			downloadFile(id, index) {
				this.imgLength++
				this.$http2.post('common/file/download', {
					id
				}).then(res => {
					console.log(res)
					if (res.code === 10000) {
						this.imgItem.push(res.data.fileData)
						this.ticketFile[index] = {}
						this.ticketFile[index].fileData = res.data.fileData
						console.log(this.ticketFile)
					}
				})
			},
			downloadResult(id, index) {
				this.resultNum++
				this.$http2.post('common/file/download', {
					id
				}).then(res => {
					console.log(res)
					if (res.code === 10000) {
						this.imgItem.push(res.data.fileData)
						this.resultFile[index] = {}
						this.resultFile[index].fileData = res.data.fileData
						console.log(this.resultFile)
					}
				})
			},
			downloadEvaluate(id, index) {
				this.evaluateNum++
				this.$http2.post('common/file/download', {
					id
				}).then(res => {
					console.log(res)
					if (res.code === 10000) {
						this.imgItem.push(res.data.fileData)
						this.evaluateFile[index] = {}
						this.evaluateFile[index].fileData = res.data.fileData
						// console.log(this.resultFile)
					}
				})
			},
			downloadSign(id) {
				this.$http2.post('common/file/download', {
					id
				}).then(res => {
					console.log(res.data.fileData)
					if (res.code === 10000) {
						this.signFile = res.data.fileData
					}
				})
			}
		}
	}
</script>

<style lang="scss">
	/* #ifndef APP-NVUE */
	page {
		display: flex;
		flex-direction: column;
		box-sizing: border-box;
		background-color: #f5f5f5;
		min-height: 100%;
		height: auto;
	}

	view {
		font-size: 32rpx;
		line-height: inherit;
	}

	.example {
		padding: 0 30rpx 30rpx;
	}

	.example-info {
		padding: 30rpx;
		color: #3b4144;
		background: #ffffff;
	}

	.example-body {
		height: auto !important;
		// padding-bottom: 80rpx;
		// margin-bottom: 80rpx;
		flex-direction: row;
		flex-wrap: wrap;
		justify-content: center;
		padding: 0;
		font-size: 14rpx;
		background-color: #ffffff;
	}

	/* #endif */
	.example {
		padding: 0 30rpx;
	}

	.example-info {
		/* #ifndef APP-NVUE */
		display: block;
		/* #endif */
		padding: 30rpx;
		color: #3b4144;
		background-color: #ffffff;
		font-size: 30rpx;
	}

	.example-info-text {
		font-size: 28rpx;
		line-height: 36rpx;
	}


	.example-body {
		flex-direction: column;
		// padding: 30rpx;
		background-color: #ffffff;
	}

	.word-btn-white {
		font-size: 18px;
		color: #FFFFFF;
	}

	.word-btn {
		/* #ifndef APP-NVUE */
		display: flex;
		/* #endif */
		flex-direction: row;
		align-items: center;
		justify-content: center;
		border-radius: 6px;
		height: 48px;
		margin: 15px;
		background-color: $theme-color;
	}

	.word-btn--hover {
		background-color: #4ca2ff;
	}


	.status-btn {
		/* #ifndef APP-NVUE */
		display: flex;
		/* #endif */
		flex-direction: row;
		align-items: center;
		justify-content: center;
		height: 92rpx;
		margin: 30rpx;
		background-color: #007AFF;
	}

	.example-body {
		/* #ifndef APP-NVUE */
		display: block;
		/* #endif */
		// padding: 15px;
		flex-direction: row;
	}

	.bgwhite {
		background-color: #fff;
		height: 80vh;
	}

	.navbar {
		display: flex;
		height: 40px;
		padding: 0 5px;
		background: #fff;
		// box-shadow: 0 1px 5px rgba(0, 0, 0, 0.06);
		position: relative;
		z-index: 10;
		border-bottom: 2rpx solid #f5f5f5;

		.nav-item {
			flex: 1;
			display: flex;
			justify-content: center;
			align-items: center;
			height: 100%;
			font-size: 32rpx;
			color: #666;
			position: relative;

			&.current {
				color: $theme-color;

				&:after {
					content: '';
					position: absolute;
					left: 50%;
					bottom: 0;
					transform: translateX(-50%);
					width: 120rpx;
					height: 0;
					border-bottom: 2px solid $theme-color;
				}
			}
		}
	}

	.cleanDetail-container {
		// background-color: #f5f5f5;
		// padding-bottom: 94rpx;

		.detail-item {
			width: 750rpx;
			// height: 88rpx;
			display: flex;
			// align-items: center;
			// line-height: 88rpx;
			padding: 23rpx 0;
			padding-left: 40rpx;
			background-color: #fff;
			border-bottom: 2rpx solid #f5f5f5;

			// view {
			// 	padding-right: 30rpx;
			// }
			.left {
				width: 200rpx;
				// margin-right: 37rpx;
			}

			.right-content {
				word-break: break-all;
				flex: 1;
				padding-right: 30rpx;
			}

			.sign {
				width: 115rpx;
				height: 88rpx;

				image {
					width: 100%;
					height: 100%;
				}
			}

			.name {
				margin-right: 26rpx;
			}
		}

		.evaluate-content {
			padding: 23rpx;
			width: 750rpx;
			height: 348rpx;
			background-color: #fff;

			.evaluate-item {
				width: 750rpx;
				height: 88rpx;
				display: flex;
				align-items: center;
				line-height: 88rpx;
				padding-left: 20rpx;
				// border-bottom: 1rpx solid #EEEEEE;
				background-color: #fff;

				.left {
					margin-right: 37rpx;
				}

				.sign {
					width: 115rpx;
					height: 88rpx;

					image {
						width: 100%;
						height: 100%;
					}
				}

				.name {
					margin-right: 26rpx;
				}

				.desc-text {
					// color: #BCBCBC;
					font-size: 30rpx;
					margin-left: 18rpx;
				}
			}

			.evaluate-desc {
				width: 496rpx;
				min-height: 206rpx;
				margin-top: 10rpx;
				border: 2rpx solid #D2D2D2;
				margin-left: 214rpx;
				font-size: 32rpx;
				// color: #ccc;
				padding: 14rpx;
			}
		}

		.detail-desc {
			background-color: #fff;
			// padding-left: 20rpx;
			padding: 20rpx;
			// padding-bottom: 20rpx;
		}

		.detail-img {
			background-color: #fff;
			display: flex;

			.img-item {
				width: 230rpx;
				height: 230rpx;
				margin-left: 10rpx;

				image {
					width: 100%;
					height: 100%;
				}
			}
		}

		.ticket-btn {
			// margin-left: -100rpx;
			// height: 80rpx;
			// text-align: center;
			// margin-top: 100rpx;
			color: #fff;
			background-color: $theme-color;
			left: 0;
			right: 0;
			position: fixed;
			bottom: 0;
			border-radius: 0;
		}
	}
</style>
